<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奇刷刷 iOS 项目技术文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'PingFang SC', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(100px, -100px);
        }

        header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        header p {
            font-size: 1.1em;
            opacity: 0.95;
            position: relative;
            z-index: 1;
            margin-bottom: 20px;
        }

        .platform-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            margin-top: 10px;
            position: relative;
            z-index: 1;
        }

        .content-wrapper {
            display: flex;
            min-height: 600px;
        }

        aside {
            width: 260px;
            background: #f8f9fa;
            border-right: 1px solid #e9ecef;
            padding: 30px 20px;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
            position: sticky;
            top: 100px;
        }

        nav ul {
            list-style: none;
        }

        nav li {
            margin: 12px 0;
        }

        nav a {
            display: block;
            color: #667eea;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.95em;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        nav a:hover, nav a.active {
            background: #e7f0ff;
            border-left-color: #667eea;
            color: #764ba2;
        }

        main {
            flex: 1;
            padding: 40px;
        }

        section {
            margin-bottom: 50px;
            scroll-margin-top: 100px;
        }

        h2 {
            font-size: 2em;
            color: #667eea;
            margin: 40px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 3px solid #f0f0f0;
        }

        h3 {
            font-size: 1.4em;
            color: #764ba2;
            margin: 25px 0 15px 0;
        }

        h4 {
            font-size: 1.1em;
            color: #555;
            margin: 15px 0 10px 0;
        }

        p {
            margin: 12px 0;
            line-height: 1.8;
        }

        .info-box, .success-box, .warning-box, .error-box {
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            border-left: 4px solid;
        }

        .info-box {
            background: #e7f3ff;
            border-left-color: #667eea;
            color: #004085;
        }

        .success-box {
            background: #d4edda;
            border-left-color: #28a745;
            color: #155724;
        }

        .warning-box {
            background: #fff3cd;
            border-left-color: #ffc107;
            color: #856404;
        }

        .error-box {
            background: #f8d7da;
            border-left-color: #dc3545;
            color: #721c24;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 600;
        }

        td {
            padding: 12px;
            border-bottom: 1px solid #e9ecef;
        }

        tr:hover {
            background: #f8f9fa;
        }

        tr:last-child td {
            border-bottom: none;
        }

        code {
            background: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 2px 6px;
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            color: #e83e8c;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.6;
            position: relative;
        }

        pre code {
            background: none;
            border: none;
            padding: 0;
            color: #d4d4d4;
        }

        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85em;
            transition: background 0.3s;
        }

        .copy-btn:hover {
            background: #764ba2;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .feature-card {
            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
            border: 2px solid #667eea30;
            padding: 20px;
            border-radius: 8px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: #667eea;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
        }

        .feature-card h4 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .feature-card p {
            font-size: 0.95em;
            margin: 8px 0;
        }

        ul, ol {
            margin: 15px 0;
            padding-left: 25px;
        }

        li {
            margin: 8px 0;
            line-height: 1.8;
        }

        .architecture-box {
            background: #f8f9fa;
            border: 2px dashed #667eea;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            font-size: 0.9em;
            overflow-x: auto;
        }

        .metric {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            margin: 5px;
            font-size: 0.9em;
        }

        footer {
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            padding: 30px 40px;
            text-align: center;
            color: #666;
            font-size: 0.9em;
        }

        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #667eea;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            font-weight: bold;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background: #764ba2;
            transform: translateY(-3px);
        }

        @media (max-width: 768px) {
            .content-wrapper {
                flex-direction: column;
            }

            aside {
                width: 100%;
                max-height: none;
                border-right: none;
                border-bottom: 1px solid #e9ecef;
                position: static;
            }

            header h1 {
                font-size: 1.8em;
            }

            main {
                padding: 20px;
            }

            h2 {
                font-size: 1.5em;
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            pre {
                font-size: 0.8em;
            }

            .back-to-top {
                width: 40px;
                height: 40px;
                bottom: 20px;
                right: 20px;
            }
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #667eea;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #764ba2;
        }

        .tag {
            display: inline-block;
            background: #e7f3ff;
            color: #667eea;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.85em;
            margin: 2px;
        }

        .version-info {
            background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
            border: 1px solid #667eea;
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
            font-size: 0.95em;
        }

        .quick-links {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 20px 0;
        }

        .quick-links a {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.3s;
            font-size: 0.9em;
        }

        .quick-links a:hover {
            background: #764ba2;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .stat-card .number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .stat-card .label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .timeline {
            position: relative;
            padding: 20px 0 20px 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #667eea;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -38px;
            top: 5px;
            width: 12px;
            height: 12px;
            background: #667eea;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 4px #667eea;
        }

        .timeline-item h4 {
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header>
            <h1>🍎 奇刷刷 iOS 项目</h1>
            <p>商业级直播 + 短视频社交平台技术文档</p>
            <div class="platform-badge">
                <span>🏗️ 完整技术架构指南</span>
            </div>
        </header>

        <!-- Main Content -->
        <div class="content-wrapper">
            <!-- Sidebar Navigation -->
            <aside>
                <nav>
                    <ul>
                        <li><a href="#overview" class="nav-link">项目概述</a></li>
                        <li><a href="#architecture" class="nav-link">系统架构</a></li>
                        <li><a href="#features" class="nav-link">核心功能</a></li>
                        <li><a href="#techstack" class="nav-link">技术栈</a></li>
                        <li><a href="#config" class="nav-link">项目配置</a></li>
                        <li><a href="#build" class="nav-link">编译构建</a></li>
                        <li><a href="#permissions" class="nav-link">权限管理</a></li>
                        <li><a href="#optimization" class="nav-link">性能优化</a></li>
                        <li><a href="#standards" class="nav-link">开发规范</a></li>
                        <li><a href="#troubleshooting" class="nav-link">故障排除</a></li>
                    </ul>
                </nav>
            </aside>

            <!-- Main Content -->
            <main>
                <!-- Overview Section -->
                <section id="overview">
                    <h2>📱 项目概述</h2>
                    
                    <div class="version-info">
                        <strong>应用名称:</strong> 奇刷刷 (QiShuaShua)<br>
                        <strong>平台:</strong> iOS (Swift/Objective-C)<br>
                        <strong>最小版本:</strong> iOS 12.0+<br>
                        <strong>目标版本:</strong> iOS 16.0+<br>
                        <strong>主应用名:</strong> klcMPVA
                    </div>

                    <h3>项目定位</h3>
                    <p>奇刷刷是一个商业级直播流媒体平台与短视频社交网络的完整解决方案，提供：</p>
                    <ul>
                        <li>实时直播流媒体传输与播放</li>
                        <li>专业级短视频制作与编辑</li>
                        <li>社交化内容分发与互动</li>
                        <li>多元化变现与商业化</li>
                        <li>跨平台统一体验</li>
                    </ul>

                    <h3>核心指标</h3>
                    <div class="stat-grid">
                        <div class="stat-card">
                            <div class="number">15+</div>
                            <div class="label">组件项目</div>
                        </div>
                        <div class="stat-card">
                            <div class="number">100+</div>
                            <div class="label">第三方库</div>
                        </div>
                        <div class="stat-card">
                            <div class="number">5</div>
                            <div class="label">模块层级</div>
                        </div>
                        <div class="stat-card">
                            <div class="number">10</div>
                            <div class="label">核心功能</div>
                        </div>
                    </div>
                </section>

                <!-- Architecture Section -->
                <section id="architecture">
                    <h2>🏗️ 系统架构</h2>

                    <h3>5层模块化架构</h3>
                    <div class="architecture-box">┌─────────────────────────────────────┐
│      展示层 (UI/Presentation)      │
│  ├─ BasicFunction (基础功能)      │
│  └─ CoreFunction (核心功能)       │
├─────────────────────────────────────┤
│      业务层 (Business Logic)       │
│  ├─ LibModel (数据模型)           │
│  └─ LibThird (第三方集成)         │
├─────────────────────────────────────┤
│      框架层 (Framework)            │
│  ├─ LibFrame (UI框架)             │
│  └─ LibOther (基础设施)           │
├─────────────────────────────────────┤
│      工具层 (Utilities)            │
│  └─ LibTool (通用工具)            │
├─────────────────────────────────────┤
│      主应用 (Main App)             │
│  └─ klcMPVA (入口程序)            │
└─────────────────────────────────────┘</div>

                    <h3>模块职责</h3>
                    <table>
                        <tr>
                            <th>层级</th>
                            <th>模块</th>
                            <th>职责</th>
                            <th>关键文件</th>
                        </tr>
                        <tr>
                            <td>展示</td>
                            <td>BasicFunction</td>
                            <td>登录、消息、用户信息UI</td>
                            <td>LoginVC, ChatVC</td>
                        </tr>
                        <tr>
                            <td>展示</td>
                            <td>CoreFunction</td>
                            <td>短视频制作、编辑UI</td>
                            <td>VideoEditorVC</td>
                        </tr>
                        <tr>
                            <td>业务</td>
                            <td>LibModel</td>
                            <td>数据模型、网络请求</td>
                            <td>User.swift, Video.swift</td>
                        </tr>
                        <tr>
                            <td>业务</td>
                            <td>LibThird</td>
                            <td>第三方SDK集成</td>
                            <td>TXImKit, Aliyun</td>
                        </tr>
                        <tr>
                            <td>框架</td>
                            <td>LibFrame</td>
                            <td>UI组件库、全局配置</td>
                            <td>KLCProjConfig</td>
                        </tr>
                        <tr>
                            <td>工具</td>
                            <td>LibTool</td>
                            <td>网络、存储、日志</td>
                            <td>APIService</td>
                        </tr>
                    </table>
                </section>

                <!-- Features Section -->
                <section id="features">
                    <h2>⭐ 核心功能模块</h2>

                    <div class="feature-grid">
                        <div class="feature-card">
                            <h4>🔴 直播功能</h4>
                            <p>主播端实时编码传输，观众端低延迟播放，互动礼物系统</p>
                        </div>
                        <div class="feature-card">
                            <h4>🎬 短视频</h4>
                            <p>视频拍摄、编辑、美颜滤镜、分享发布</p>
                        </div>
                        <div class="feature-card">
                            <h4>💬 社交互动</h4>
                            <p>用户关注、消息聊天、评论点赞、动态流</p>
                        </div>
                        <div class="feature-card">
                            <h4>💳 支付变现</h4>
                            <p>礼物打赏、虚拟商品、收益提现</p>
                        </div>
                        <div class="feature-card">
                            <h4>🔐 认证系统</h4>
                            <p>一键登录、第三方登录、Token管理</p>
                        </div>
                        <div class="feature-card">
                            <h4>📊 分析追踪</h4>
                            <p>事件埋点、用户行为分析、性能监控</p>
                        </div>
                    </div>

                    <h3>功能详情</h3>

                    <h4>1️⃣ 直播功能 (Live Streaming)</h4>
                    <div class="info-box">
                        <strong>主要特性：</strong><br>
                        ✓ 主播端实时直播编码<br>
                        ✓ 观众端低延迟播放<br>
                        ✓ 弹幕、评论、礼物互动<br>
                        ✓ 多码率自适应<br>
                        <br>
                        <strong>关键依赖：</strong>
                        Tencent LiteAVSDK, Agora SDK
                    </div>

                    <h4>2️⃣ 短视频功能 (Short Video)</h4>
                    <div class="success-box">
                        <strong>主要特性：</strong><br>
                        ✓ 视频拍摄与录制<br>
                        ✓ 实时美颜滤镜<br>
                        ✓ 视频编辑 (裁剪、转场、字幕)<br>
                        ✓ 本地草稿保存<br>
                        <br>
                        <strong>关键依赖：</strong>
                        Aliyun Video SDK, OpenGL, Vision Framework
                    </div>

                    <h4>3️⃣ 社交互动 (Social)</h4>
                    <div class="info-box">
                        <strong>主要特性：</strong><br>
                        ✓ 用户关注/粉丝管理<br>
                        ✓ 消息/聊天系统<br>
                        ✓ 动态/Feed流<br>
                        ✓ 用户资料管理<br>
                        <br>
                        <strong>关键依赖：</strong>
                        Tencent IM SDK, ShareSDK
                    </div>
                </section>

                <!-- Tech Stack Section -->
                <section id="techstack">
                    <h2>🛠️ 技术栈</h2>

                    <h3>核心技术框架</h3>
                    <table>
                        <tr>
                            <th>类别</th>
                            <th>技术</th>
                            <th>版本</th>
                            <th>用途</th>
                        </tr>
                        <tr>
                            <td>语言</td>
                            <td>Swift / Objective-C</td>
                            <td>5.7+</td>
                            <td>应用开发</td>
                        </tr>
                        <tr>
                            <td>构建工具</td>
                            <td>Xcode</td>
                            <td>14.0+</td>
                            <td>IDE与编译</td>
                        </tr>
                        <tr>
                            <td>依赖管理</td>
                            <td>CocoaPods</td>
                            <td>1.11+</td>
                            <td>第三方库</td>
                        </tr>
                        <tr>
                            <td>网络框架</td>
                            <td>Alamofire</td>
                            <td>5.6+</td>
                            <td>HTTP客户端</td>
                        </tr>
                        <tr>
                            <td>响应式编程</td>
                            <td>RxSwift</td>
                            <td>6.0+</td>
                            <td>函数式编程</td>
                        </tr>
                        <tr>
                            <td>本地存储</td>
                            <td>SQLite / Realm</td>
                            <td>-</td>
                            <td>数据库</td>
                        </tr>
                    </table>

                    <h3>音视频SDK</h3>
                    <table>
                        <tr>
                            <th>SDK</th>
                            <th>版本</th>
                            <th>功能</th>
                            <th>备注</th>
                        </tr>
                        <tr>
                            <td>Tencent LiteAV</td>
                            <td>7.2.8927+</td>
                            <td>直播、RTC、点播</td>
                            <td>主选方案</td>
                        </tr>
                        <tr>
                            <td>Agora RTC</td>
                            <td>2.9.5+</td>
                            <td>实时通讯</td>
                            <td>备选方案</td>
                        </tr>
                        <tr>
                            <td>Aliyun Video</td>
                            <td>3.x+</td>
                            <td>短视频录制、编码</td>
                            <td>视频生产</td>
                        </tr>
                    </table>

                    <h3>第三方集成</h3>
                    <div class="feature-grid">
                        <div class="feature-card">
                            <h4>社交与IM</h4>
                            <p>
                                • Tencent IM<br>
                                • ShareSDK<br>
                                • 微信SDK<br>
                                • QQ SDK
                            </p>
                        </div>
                        <div class="feature-card">
                            <h4>支付商务</h4>
                            <p>
                                • Alipay SDK<br>
                                • WeChat SDK<br>
                                • StoreKit 2.0<br>
                                • 支付管理
                            </p>
                        </div>
                        <div class="feature-card">
                            <h4>云服务</h4>
                            <p>
                                • Aliyun OSS<br>
                                • Aliyun Live<br>
                                • Tencent COS<br>
                                • Qiniu
                            </p>
                        </div>
                        <div class="feature-card">
                            <h4>分析监测</h4>
                            <p>
                                • Firebase<br>
                                • Sentry<br>
                                • Adjust<br>
                                • DataEye
                            </p>
                        </div>
                    </div>
                </section>

                <!-- Configuration Section -->
                <section id="config">
                    <h2>⚙️ 项目配置</h2>

                    <h3>Xcode 项目结构</h3>
                    <pre><code>klcMPVA/
├── klcMPVA.xcworkspace/      # Workspace
├── klcMPVA.xcodeproj/        # 项目文件
├── klcMPVA/
│   ├── AppDelegate.swift
│   ├── Info.plist
│   ├── Assets.xcassets/
│   └── Sources/
├── Pods/                     # CocoaPods
├── Podfile
└── Podfile.lock</code></pre>

                    <h3>Info.plist 关键配置</h3>
                    <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;dict&gt;
    &lt;!-- 应用显示名称 --&gt;
    &lt;key&gt;CFBundleDisplayName&lt;/key&gt;
    &lt;string&gt;奇刷刷&lt;/string&gt;

    &lt;!-- URL Schemes --&gt;
    &lt;key&gt;CFBundleURLTypes&lt;/key&gt;
    &lt;array&gt;
        &lt;dict&gt;
            &lt;key&gt;CFBundleURLSchemes&lt;/key&gt;
            &lt;array&gt;
                &lt;string&gt;klcMPVA&lt;/string&gt;
                &lt;string&gt;tencent101890499&lt;/string&gt;
                &lt;string&gt;wxef87311d8cecb346&lt;/string&gt;
            &lt;/array&gt;
        &lt;/dict&gt;
    &lt;/array&gt;

    &lt;!-- 权限描述 --&gt;
    &lt;key&gt;NSCameraUsageDescription&lt;/key&gt;
    &lt;string&gt;需要访问摄像头&lt;/string&gt;
&lt;/dict&gt;</code></pre>

                    <button class="copy-btn" onclick="copyCode(this)">📋 复制</button>

                    <div class="warning-box">
                        <strong>⚠️ 重要提示：</strong> 修改 Info.plist 时必须同时更新 Build Settings 中的对应配置项，否则可能导致编译失败。
                    </div>
                </section>

                <!-- Build Section -->
                <section id="build">
                    <h2>🔨 编译与构建</h2>

                    <h3>环境要求</h3>
                    <ul>
                        <li>macOS 12.0 或更高版本</li>
                        <li>Xcode 14.0 或更高版本</li>
                        <li>CocoaPods 1.11.0 或更高版本</li>
                        <li>iOS SDK 16.0+</li>
                        <li>磁盘空间 ≥ 20GB</li>
                    </ul>

                    <h3>首次构建步骤</h3>
                    <pre><code># 1. 进入项目目录
cd /path/to/qss-ios-new/Project/rechao/klcMPVA

# 2. 安装 Pod 依赖
pod install --repo-update

# 3. 打开 Xcode Workspace
open klcMPVA.xcworkspace

# 4. 选择 Target 和 Scheme
# 5. 按 Cmd+B 编译
# 6. 按 Cmd+R 运行</code></pre>

                    <button class="copy-btn" onclick="copyCode(this)">📋 复制</button>

                    <h3>常见编译问题</h3>
                    <div class="error-box">
                        <strong>❌ Pod 依赖版本冲突</strong><br>
                        解决方案:<br>
                        <code>pod deintegrate && pod install --repo-update</code>
                    </div>

                    <div class="warning-box">
                        <strong>⚠️ Bitcode 不兼容</strong><br>
                        解决方案: Build Settings → Enable Bitcode = NO
                    </div>

                    <div class="error-box">
                        <strong>❌ Swift 版本不匹配</strong><br>
                        在 Podfile 中添加:<br>
                        <code>config.build_settings['SWIFT_VERSION'] = '5.7'</code>
                    </div>
                </section>

                <!-- Permissions Section -->
                <section id="permissions">
                    <h2>🔐 权限管理</h2>

                    <h3>iOS 系统权限</h3>
                    <table>
                        <tr>
                            <th>权限</th>
                            <th>用途</th>
                            <th>Info.plist 键</th>
                        </tr>
                        <tr>
                            <td>摄像头</td>
                            <td>直播、视频录制</td>
                            <td>NSCameraUsageDescription</td>
                        </tr>
                        <tr>
                            <td>麦克风</td>
                            <td>直播、视频音频</td>
                            <td>NSMicrophoneUsageDescription</td>
                        </tr>
                        <tr>
                            <td>相册</td>
                            <td>图片/视频选择</td>
                            <td>NSPhotoLibraryUsageDescription</td>
                        </tr>
                        <tr>
                            <td>位置</td>
                            <td>位置功能、推荐</td>
                            <td>NSLocationWhenInUseUsageDescription</td>
                        </tr>
                        <tr>
                            <td>通讯录</td>
                            <td>联系人邀请</td>
                            <td>NSContactsUsageDescription</td>
                        </tr>
                        <tr>
                            <td>追踪</td>
                            <td>广告追踪 (可选)</td>
                            <td>NSUserTrackingUsageDescription</td>
                        </tr>
                    </table>

                    <h3>运行时权限请求</h3>
                    <pre><code>import AVFoundation
import Photos

// 相机权限
AVCaptureDevice.requestAccess(for: .video) { granted in
    if granted {
        // 启动相机
    }
}

// 麦克风权限
AVAudioSession.sharedInstance().requestRecordPermission { allowed in
    if allowed {
        // 启用录音
    }
}

// 相册权限
PHPhotoLibrary.requestAuthorization { status in
    switch status {
    case .authorized:
        // 访问相册
    default:
        break
    }
}</code></pre>

                    <button class="copy-btn" onclick="copyCode(this)">📋 复制</button>
                </section>

                <!-- Optimization Section -->
                <section id="optimization">
                    <h2>⚡ 性能优化</h2>

                    <h3>启动时间优化</h3>
                    <div class="success-box">
                        <strong>🎯 目标：</strong> 冷启动 &lt; 2秒，热启动 &lt; 1秒<br><br>
                        <strong>优化方法：</strong><br>
                        ✓ 延迟加载非关键SDK<br>
                        ✓ 异步初始化数据库<br>
                        ✓ 减少main()调用前的初始化<br>
                        ✓ 使用本地缓存
                    </div>

                    <h3>内存管理</h3>
                    <pre><code>// 监听内存警告
NotificationCenter.default.addObserver(
    self,
    selector: #selector(handleMemoryWarning),
    name: UIApplication.didReceiveMemoryWarningNotification,
    object: nil
)

@objc func handleMemoryWarning() {
    // 清理缓存
    URLCache.shared.removeAllCachedResponses()
}</code></pre>

                    <h3>网络优化</h3>
                    <ul>
                        <li><strong>连接复用</strong>: HTTP Keep-Alive</li>
                        <li><strong>请求合并</strong>: 批量API调用</li>
                        <li><strong>超时控制</strong>: 设置合理超时 (10-15s)</li>
                        <li><strong>CDN加速</strong>: 使用CDN分发内容</li>
                    </ul>

                    <h3>视频相关优化</h3>
                    <table>
                        <tr>
                            <th>场景</th>
                            <th>优化方案</th>
                        </tr>
                        <tr>
                            <td>直播</td>
                            <td>自适应码率、动态帧率、网弱降速</td>
                        </tr>
                        <tr>
                            <td>短视频编辑</td>
                            <td>预加载关键帧、后台导出、分片编码</td>
                        </tr>
                        <tr>
                            <td>图像处理</td>
                            <td>Metal GPU加速、纹理压缩</td>
                        </tr>
                    </table>
                </section>

                <!-- Standards Section -->
                <section id="standards">
                    <h2>📋 开发规范</h2>

                    <h3>Swift 代码规范</h3>
                    <pre><code>// 命名规则
class UserViewController {}      // 类: PascalCase
var userName: String            // 变量: camelCase
let maxRetries = 3              // 常量: camelCase
func updateUserProfile() {}      // 方法: camelCase

// 代码组织
class Example {
    // MARK: - Properties
    var property: String
    
    // MARK: - Lifecycle
    init() {}
    
    // MARK: - Methods
    func method() {}
}</code></pre>

                    <h3>项目结构建议</h3>
                    <pre><code>klcMPVA/
├── Screens/         # 页面模块
├── Services/        # 业务服务层
├── Models/          # 数据模型
├── Utilities/       # 工具类
└── Resources/       # 资源文件</code></pre>

                    <h3>Git 提交规范</h3>
                    <div class="info-box">
                        <strong>Commit 类型：</strong><br>
                        • <code>feat</code>: 新功能<br>
                        • <code>fix</code>: 修复bug<br>
                        • <code>refactor</code>: 代码重构<br>
                        • <code>perf</code>: 性能优化<br>
                        • <code>docs</code>: 文档更新<br>
                        • <code>style</code>: 代码风格调整<br>
                        • <code>test</code>: 测试代码<br>
                        • <code>chore</code>: 构建/工具/依赖更新
                    </div>
                </section>

                <!-- Troubleshooting Section -->
                <section id="troubleshooting">
                    <h2>🐛 故障排除</h2>

                    <h3>应用启动崩溃</h3>
                    <div class="error-box">
                        <strong>❌ 症状:</strong> 应用启动后立即闪退<br><br>
                        <strong>排查步骤:</strong><br>
                        1. 查看 Console 日志 (Xcode > Console)<br>
                        2. 检查异常日志<br>
                        3. 逐个注释第三方SDK初始化<br>
                        4. 检查 Info.plist 配置
                    </div>

                    <h3>内存泄漏</h3>
                    <div class="warning-box">
                        <strong>⚠️ 症状:</strong> 内存占用持续上升<br><br>
                        <strong>排查步骤:</strong><br>
                        1. 使用 Instruments > Leaks 工具<br>
                        2. 检查 delegate、block、观察者<br>
                        3. 验证 ViewController lifecycle<br>
                        4. 检查 Timer invalidate
                    </div>

                    <h3>UI卡顿</h3>
                    <div class="info-box">
                        <strong>📊 症状:</strong> 主线程任务过重<br><br>
                        <strong>优化方案:</strong>
                        <pre><code>// 异步执行重操作
DispatchQueue.global().async {
    let data = self.loadHeavyData()
    DispatchQueue.main.async {
        self.displayData(data)
    }
}</code></pre>
                    </div>

                    <h3>直播/视频卡顿</h3>
                    <div class="warning-box">
                        <strong>⚠️ 原因分析:</strong><br>
                        • 码率过高导致带宽不足<br>
                        • GPU满载无法处理美颜<br>
                        • 编码帧率设置过高<br><br>
                        <strong>优化建议:</strong><br>
                        ✓ 动态调整码率 (300-800kbps)<br>
                        ✓ 降低美颜滤镜效果<br>
                        ✓ 限制目标帧率 (24-30fps)<br>
                        ✓ 监控设备温度
                    </div>

                    <h3>性能指标</h3>
                    <table>
                        <tr>
                            <th>指标</th>
                            <th>目标</th>
                            <th>说明</th>
                        </tr>
                        <tr>
                            <td>冷启动时间</td>
                            <td>&lt; 2s</td>
                            <td>首次打开应用</td>
                        </tr>
                        <tr>
                            <td>热启动时间</td>
                            <td>&lt; 1s</td>
                            <td>后台恢复</td>
                        </tr>
                        <tr>
                            <td>内存占用</td>
                            <td>&lt; 150MB</td>
                            <td>正常使用时</td>
                        </tr>
                        <tr>
                            <td>帧率 (FPS)</td>
                            <td>60</td>
                            <td>流畅度指标</td>
                        </tr>
                        <tr>
                            <td>直播延迟</td>
                            <td>&lt; 1s</td>
                            <td>从主播到观众</td>
                        </tr>
                    </table>
                </section>

                <!-- Summary Section -->
                <section id="summary">
                    <h2>📝 总结与展望</h2>

                    <h3>当前版本能力</h3>
                    <div class="success-box">
                        ✅ 完整的直播流媒体平台<br>
                        ✅ 短视频制作与分享<br>
                        ✅ 实时社交互动<br>
                        ✅ 多种变现方式<br>
                        ✅ 跨平台统一体验
                    </div>

                    <h3>后续优化方向</h3>
                    <div class="feature-grid">
                        <div class="feature-card">
                            <h4>🚀 技术升级</h4>
                            <p>• SwiftUI迁移<br>• Combine框架<br>• Swift Concurrency<br>• VisionOS适配</p>
                        </div>
                        <div class="feature-card">
                            <h4>🎯 功能扩展</h4>
                            <p>• AI内容审核<br>• 实时翻译<br>• 虚拟主播<br>• 元宇宙社交</p>
                        </div>
                        <div class="feature-card">
                            <h4>⚡ 性能提升</h4>
                            <p>• Metal GPU加速<br>• 增量编码<br>• 多核并行<br>• 边缘计算</p>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- Footer -->
        <footer>
            <p>📱 <strong>奇刷刷 iOS 项目技术文档</strong> | 版本 v1.0 | 最后更新: 2025年11月17日</p>
            <p>© 2024 QiShuaShua. All rights reserved.</p>
            <div class="quick-links" style="justify-content: center;">
                <a href="#overview">顶部</a>
                <a href="https://developer.apple.com">Apple文档</a>
                <a href="https://cocoapods.org">CocoaPods</a>
            </div>
        </footer>
    </div>

    <!-- Back to Top Button -->
    <div class="back-to-top" id="backToTop">↑</div>

    <script>
        // Navigation active state
        const navLinks = document.querySelectorAll('.nav-link');
        const sections = document.querySelectorAll('section');

        window.addEventListener('scroll', () => {
            let current = '';
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop - 200) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href').slice(1) === current) {
                    link.classList.add('active');
                }
            });
        });

        // Back to top button
        const backToTop = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });

        backToTop.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Copy code functionality
        function copyCode(button) {
            const pre = button.nextElementSibling || button.previousElementSibling;
            const text = pre.textContent;
            
            navigator.clipboard.writeText(text).then(() => {
                const originalText = button.textContent;
                button.textContent = '✅ 已复制!';
                setTimeout(() => {
                    button.textContent = originalText;
                }, 2000);
            });
        }

        // Smooth scroll for links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        // Add copy buttons to all code blocks
        document.querySelectorAll('pre').forEach(pre => {
            if (!pre.previousElementSibling || !pre.previousElementSibling.classList.contains('copy-btn')) {
                const button = document.createElement('button');
                button.classList.add('copy-btn');
                button.textContent = '📋 复制';
                button.onclick = function() { copyCode(this); };
                pre.insertAdjacentElement('beforebegin', button);
            }
        });

        console.log('✅ iOS 技术文档已加载完成');
    </script>
</body>
</html>
